<style>
    .layui-form-item .layui-input-company {
        width: auto;
        padding-right: 10px;
        line-height: 38px;
    }

    .input-def input {
        width: 80%;
        display: inline-block;
    }

    .icon-item {
        position: relative;
        padding: 0 !important;
        margin-top: 9px;
    }

    .icon-log {
        max-width: 80px;
        max-height: 120px;
    }

    .icon-close {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 5px;
        top: 5px;
    }
</style>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li class="">小程序首页设置</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layuimini-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">网站名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="sitename" lay-verify="required" lay-reqtext="网站域名不能为空"
                                       placeholder="请输入网站名称" value="{:sysconf('sitename')}" class="layui-input">
                                <tip>填写自己部署网站的名称。</tip>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">网站logo</label>
                            <div class="layui-input-block input-def" style="">
                                <input type="text" name="icon" lay-verify="required" autocomplete="off" disabled
                                       value="{:sysconf('icon')}" id="icon" class="layui-input">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="uploadImage">上传</button>
                                    <!--                                    <button class="layui-btn">选择</button>-->
                                </div>
                                <div id="progressImg"></div>
                            </div>
                            <div class="layui-input-block layui-form-mid layui-word-aux icon-item">
                                <img src="/{:sysconf('icon')}" class="icon-log" id="icon-img" alt="">
                            </div>
                            <div class="errorText"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">版本信息</label>
                            <div class="layui-input-block" style="">
                                <input type="text" name="version" lay-verify="required" value="{:sysconf('version')}"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label required">版权信息</label>
                            <div class="layui-input-block">
                                <textarea name="copyright"
                                          class="layui-textarea">{:sysconf('copyright')}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addBtn">确认保存</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form layuimini-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">bar选中背景</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" value="{:sysconf('backgroundColor')}" name="backgroundColor" placeholder="请选择颜色"
                                       class="layui-input" id="backgroundColor-input">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="backgroundColor"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">bar选中颜色</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" value="{:sysconf('color')}" name="color" placeholder="请选择颜色"
                                       class="layui-input" id="color-input">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="color"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">bar选中文字颜色</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" value="{:sysconf('selectedColor')}" name="selectedColor" placeholder="请选择颜色"
                                       class="layui-input" id="selectedColor-input">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="selectedColor"></div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label required">其他背景</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" value="{:sysconf('h_backgroundColor')}" name="h_backgroundColor" placeholder="请选择颜色"
                                       class="layui-input" id="h_backgroundColor-input">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="h_backgroundColor"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">其他颜色</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" value="{:sysconf('h_color')}" name="h_color" placeholder="请选择颜色"
                                       class="layui-input" id="h_color-input">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="h_color"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">其他文字颜色</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" value="{:sysconf('h_selectedColor')}" name="h_selectedColor" placeholder="请选择颜色"
                                       class="layui-input" id="h_selectedColor-input">
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div id="h_selectedColor"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">背景图片</label>
                            <div class="layui-input-block input-def" style="">
                                <input type="text" name="page_bg" lay-verify="required" autocomplete="off" disabled
                                       value="{:sysconf('page_bg')}" id="icon1" class="layui-input">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="uploadImage1">上传</button>
                                </div>
                                <div id="progressImg1"></div>
                            </div>
                            <div class="layui-input-block layui-form-mid layui-word-aux icon-item">
                                <img src="/{:sysconf('page_bg')}" class="icon-log" id="icon-img1" alt="">
                            </div>
                            <div class="errorText1" id="errorText1"></div>
                            <div class="layui-form-mid layui-word-aux">建议尺寸：750*1476</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">购票图片</label>
                            <div class="layui-input-block input-def" style="">
                                <input type="text" name="goupiao" lay-verify="required" autocomplete="off" disabled
                                       value="{:sysconf('goupiao')}" id="icon2" class="layui-input">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="uploadImage2">上传</button>
                                </div>
                                <div id="progressImg2"></div>
                            </div>
                            <div class="layui-input-block layui-form-mid layui-word-aux icon-item">
                                <img src="/{:sysconf('goupiao')}" class="icon-log" id="icon-img2" alt="">
                            </div>
                            <div class="errorText2" id="errorText2"></div>
                            <div class="layui-form-mid layui-word-aux">建议尺寸：708*863</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">馆介绍</label>
                            <div class="layui-input-block input-def" style="">
                                <input type="text" name="jieshao" lay-verify="required" autocomplete="off" disabled
                                       value="{:sysconf('jieshao')}" id="icon3" class="layui-input">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="uploadImage3">上传</button>
                                </div>
                                <div id="progressImg3"></div>
                            </div>
                            <div class="layui-input-block layui-form-mid layui-word-aux icon-item">
                                <img src="/{:sysconf('jieshao')}" class="icon-log" id="icon-img3" alt="">
                            </div>
                            <div class="errorText2" id="errorText3"></div>
                            <div class="layui-form-mid layui-word-aux">建议尺寸：236*230</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">我的商城</label>
                            <div class="layui-input-block input-def" style="">
                                <input type="text" name="shop" lay-verify="required" autocomplete="off" disabled
                                       value="{:sysconf('shop')}" id="icon4" class="layui-input">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="uploadImage4">上传</button>
                                </div>
                                <div id="progressImg4"></div>

                            </div>
                            <div class="layui-input-block layui-form-mid layui-word-aux icon-item">
                                <img src="/{:sysconf('shop')}" class="icon-log" id="icon-img4" alt="">
                            </div>
                            <div class="errorText2" id="errorText4"></div>
                            <div class="layui-form-mid layui-word-aux">建议尺寸：236*230</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">演员介绍</label>
                            <div class="layui-input-block input-def" style="">
                                <input type="text" name="yy" lay-verify="required" autocomplete="off" disabled
                                       value="{:sysconf('yy')}" id="icon5" class="layui-input">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="uploadImage5">上传</button>
                                </div>
                                <div id="progressImg5"></div>
                            </div>
                            <div class="layui-input-block layui-form-mid layui-word-aux icon-item">
                                <img src="/{:sysconf('yy')}" class="icon-log" id="icon-img5" alt="">
                            </div>
                            <div class="errorText2" id="errorText5"></div>
                            <div class="layui-form-mid layui-word-aux">建议尺寸：236*230</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addBtn1">确认保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    let form = layui.form
        , upload = layui.upload
        , element = layui.element
        , colorpicker = layui.colorpicker;

    colorpicker.render({
        elem: '#backgroundColor'
        , color: '#1c97f5'
        , done: function (color) {
            $('#backgroundColor-input').val(color);
        }
    });
    colorpicker.render({
        elem: '#color'
        , color: '#1c97f5'
        , done: function (color) {
            $('#color-input').val(color);
        }
    });
    colorpicker.render({
        elem: '#selectedColor'
        , color: '#1c97f5'
        , done: function (color) {
            $('#selectedColor-input').val(color);
        }
    });
    colorpicker.render({
        elem: '#h_backgroundColor'
        , color: '#1c97f5'
        , done: function (color) {
            $('#h_backgroundColor-input').val(color);
        }
    });
    colorpicker.render({
        elem: '#h_color'
        , color: '#1c97f5'
        , done: function (color) {
            $('#h_color-input').val(color);
        }
    });
    colorpicker.render({
        elem: '#h_selectedColor'
        , color: '#1c97f5'
        , done: function (color) {
            $('#h_selectedColor-input').val(color);
        }
    });


    let uploadInst = upload.render({
        elem: '#uploadImage',
        url: "{:url('upload/file')}",
        field: 'image'
        , acceptMime: 'image/*'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            let index = layer.msg("上传中...", {icon: 16, shade: 0.5, time: 999999})
        }
        , done: function (res) {
            layer.closeAll()
            //如果上传失败
            if (res.code != "{$result.normal}") {
                return layer.msg(res.msg, {icon: 5, shade: 0.5});
            }
            $("#icon").val(res.data.url)
            $(".icon-item").slideDown();
            $("#icon-img").attr("src", "/" + res.data.url)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#errorText2');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });
    let page_bg = upload.render({
        elem: '#uploadImage1',
        url: "{:url('upload/file')}",
        field: 'image'
        , acceptMime: 'image/*'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            let index = layer.msg("上传中...", {icon: 16, shade: 0.5, time: 999999})
        }
        , done: function (res) {
            layer.closeAll()
            //如果上传失败
            if (res.code != "{$result.normal}") {
                return layer.msg(res.msg, {icon: 5, shade: 0.5});
            }
            $("#icon1").val(res.data.url)
            $(".icon-item1").slideDown();
            $("#icon-img1").attr("src", "/" + res.data.url)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#errorText1');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                page_bg.upload();
            });
        }
    });
    let goupiao = upload.render({
        elem: '#uploadImage2',
        url: "{:url('upload/file')}",
        field: 'image'
        , acceptMime: 'image/*'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            let index = layer.msg("上传中...", {icon: 16, shade: 0.5, time: 999999})
        }
        , done: function (res) {
            layer.closeAll()
            //如果上传失败
            if (res.code != "{$result.normal}") {
                return layer.msg(res.msg, {icon: 5, shade: 0.5});
            }
            $("#icon2").val(res.data.url)
            $(".icon-item2").slideDown();
            $("#icon-img2").attr("src", "/" + res.data.url)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#errorText2');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                goupiao.upload();
            });
        }
    });
    let jieshao = upload.render({
        elem: '#uploadImage3',
        url: "{:url('upload/file')}",
        field: 'image'
        , acceptMime: 'image/*'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            let index = layer.msg("上传中...", {icon: 16, shade: 0.5, time: 999999})
        }
        , done: function (res) {
            layer.closeAll()
            //如果上传失败
            if (res.code != "{$result.normal}") {
                return layer.msg(res.msg, {icon: 5, shade: 0.5});
            }
            $("#icon3").val(res.data.url)
            $(".icon-item3").slideDown();
            $("#icon-img3").attr("src", "/" + res.data.url)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#errorText3');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                jieshao.upload();
            });
        }
    });
    let shop = upload.render({
        elem: '#uploadImage4',
        url: "{:url('upload/file')}",
        field: 'image'
        , acceptMime: 'image/*'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            let index = layer.msg("上传中...", {icon: 16, shade: 0.5, time: 999999})
        }
        , done: function (res) {
            layer.closeAll()
            //如果上传失败
            if (res.code != "{$result.normal}") {
                return layer.msg(res.msg, {icon: 5, shade: 0.5});
            }
            $("#icon4").val(res.data.url)
            $(".icon-item4").slideDown();
            $("#icon-img4").attr("src", "/" + res.data.url)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#errorText4');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                shop.upload();
            });
        }
    });
    let yy = upload.render({
        elem: '#uploadImage5',
        url: "{:url('upload/file')}",
        field: 'image'
        , acceptMime: 'image/*'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            let index = layer.msg("上传中...", {icon: 16, shade: 0.5, time: 999999})
        }
        , done: function (res) {
            layer.closeAll()
            //如果上传失败
            if (res.code != "{$result.normal}") {
                return layer.msg(res.msg, {icon: 5, shade: 0.5});
            }
            $("#icon5").val(res.data.url)
            $(".icon-item5").slideDown();
            $("#icon-img5").attr("src", "/" + res.data.url)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#errorText5');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                yy.upload();
            });
        }
    });

    //监听提交
    form.on('submit(addBtn)', function (data) {
        hadmin.http("{:url('save')}", data.field).then(function (res) {
            if (res.code === 1) {
                layer.msg(res.msg, {icon: 6, shade: 0.5}, function () {
                    window.location.reload()
                })
            }
        })
        return false;
    });
    form.on('submit(addBtn1)', function (data) {
        hadmin.http("{:url('save1')}", data.field).then(function (res) {
            if (res.code === 1) {
                layer.msg(res.msg, {icon: 6, shade: 0.5}, function () {
                    window.location.reload()
                })
            }
        })
        return false;
    });

</script>
